.banner{
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    background-color: #266;
    background: url(../img/pro-banner.jpg) no-repeat center;
    background-size: cover;
}
.item{
    width: 100%;
    height:100%;
   /* background-color: #668aca; */
}
.item-c{
    width: 1200px;
  height: 100%;
    /* background-color: #668aca; */
    margin: 0 auto;
    overflow: hidden;
    /* float: left; */
}
/* 导航栏 */
.subnav{
    margin-top: 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.subnav .left{
    height: 20px;
    float: left;
}
span{
    margin: 0;padding: 0;
}
.subnav .left img{
    float: left;
margin:7.5px  11px;
}
.subnav .left div{
    float: left;
    line-height: 20px;
    font-size: 14px;
}
.subnav .left div.blue{
    color: #668aca;
}
.subnav .list{
    height: 20px;
 
    float: right;
    overflow: hidden;
}
.subnav .list .item{
    float: left;
    width: 98px;
    height: 20px;
    /* background-color: #668aca; */
    text-align: center;
}
.subnav .list .item a{
    font-size: 14px;
    line-height: 20px;
    color: #767676;
  
}
.subnav .list .box{
    float: left;
width: 1px;
height: 8px;
margin-top: 6px;
background-color: #b5b5b5;
}
/* 根随线 */
.subnav .list .item::after{
    content: '';
    display: block;
    width: 12px;
	height: 1px;
	background-color: #668aca;
    margin: -1px auto;
    opacity: 0;
}
/* hover效果 */
.subnav .list .item:hover a{
    font-size: 16px;
    color:  #668aca;
}
.subnav .list .item:hover::after{
   opacity: 1;
}
.subnav .list .item.hov a{
    font-size: 16px;
    color:  #668aca;
}
.subnav .list .item.hov::after{
    opacity: 1;
 }
 /* 项目列表 */
 .item-c .column{
    width: 1200px;
    margin:65px auto 0 ;
    /* background-color: #668aca; */
    position: relative;
    overflow: hidden;
}
.item-c .column .column-box{
    float: left;
    margin-right: 60px;
    margin-bottom: 21px;
    width: 360px;
    height: 270px;
    /* background-color: aqua; */
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.item-c .column .column-box .img{
   width: 360px;
   height: 180px;
   border-radius: 8px;
   background-image: url(../img/column-1.jpg)  ;
   transition:0.5s;
   -webkit-transition:0.5s;
   -moz-transition:0.5s;
   -ms-transition:0.5s;
   -o-transition:0.5s;
}
.item-c .column .column-box .text{
   margin: 28px 50px 7px;
   font-size: 14px;
   height: 14px;

}
.item-c .column .column-box .text-2{
   margin: 0 50px;
   font-size: 12px;
   line-height: 12px;
}
.item-c .column .column-box .btn{
   width: 30px;
   height: 30px;
   /* background-color: #668aca; */
   background: url(../img/btn2.png) no-repeat center;
   position: absolute;
   bottom: 30px;
   right: 50px;
}
/* .product-c .column .column-box::before{
      content: '';
      display: block;
      width: 360px;
      height: 270px;
      background-color: rgba(0,0,0,.5);
      border-radius: 8px;
      position: absolute;
      margin-top: -270px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
      transition: 0.5s;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -ms-transition: 0.5s;
      -o-transition: 0.5s;
}
.product-c .column .column-box:hover:before{
   margin-top: 0;  
} */
.item-c .column-box .mask{
   width: 360px;
   height: 270px;
   background-color: rgba(0,0,0,.5);
   border-radius: 8px;
   box-sizing: border-box;
   padding: 50px 58px;
   position: absolute;
   top: 0;
   left: 0;
   color: #ffffff;
      margin-top: -270px;
      transition: 0.5s;
}
.item-c .column-box .mask .text3{
   font-size: 14px;
   line-height: 15px;
   padding-bottom:4px ;
}
.item-c .column-box .mask .text4{
   font-size: 12px;
   line-height: 12px;
   padding-bottom:14px ;
}
.item-c .column-box .mask .text5{
   font-size: 12px;
   line-height: 22px;
}
.item-c .column-box .mask .btn-1{
   position: absolute;
   bottom: 60px;
   right: 50px;
   width: 36px;
   height: 36px;
   background: url(../img/btn.png)no-repeat center;
}
/* hover效果 */
.item-c .column-box:hover .mask{
   margin-top: 0px;
}
.item-c .column-box:hover .img{
   width: 360px;
   height: 270px;
   background: url(../img/column-1.jpg) no-repeat center;
   background-size: cover;
}
.item-c .column-box:hover .btn{
  opacity: 0;
}